<div class="row"><div class="panel"><h4>View Parent Request</h4></div></div>
<div class="row">
  <?=$system_message?>
</div>
<div class="alert alert-info" >
  <a href="<?=site_url('profile/profile_update_request_by_parent')?>" class="btn">Cancel</a>
  <strong> Border-color Legends : </strong>
  &nbsp;&nbsp; 
  <code style="color:blue" >Blue</code> (Pending)  &nbsp;&nbsp; 
  <code style="color:green" >GREEN</code> (Approved)  &nbsp;&nbsp; 
  <code style="color:red" >RED</code> (Denied) &nbsp;&nbsp; 
  <code style="color:gray" >GRAY</code> (Unchanged)  &nbsp;&nbsp; 
</div>

<p></p>
<div class="clearfix"></div>

<div class="row">
  <div class="section-container auto" data-section>
    <section>
      <p class="title" data-section-title><a href="#panel1">Personal Information</a></p>
      <div class="content" data-section-content>
        <?@$this->load->view('profile/parent_request/_personal_information');?>
      </div>
    </section>
    
    <section>
      <p class="title" data-section-title><a href="#panel2">Parent Legal Information</a></p>
      <div class="content" data-section-content>
        <?@$this->load->view('profile/parent_request/_parent_legal_information')?>
      </div>
    </section>

    <section>
      <p class="title" data-section-title><a href="#panel3">Health History</a></p>
      <div class="content" data-section-content>
        <?@$this->load->view('profile/parent_request/_health_history')?>
      </div>
    </section>
    
    <section>
      <p class="title" data-section-title><a href="#panel4">Authorization</a></p>
      <div class="content" data-section-content>
        <?$this->load->view('profile/parent_request/_authorization');?>
  	 </div>
    </section>
    
  </div>
</div>

<style type="text/css">
  
  .input_value_pending{
     border: 1px solid blue !important; /* some kind of blue border */
     color:blue !important;

    /* other CSS styles */

    /* round the corners */
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px #4195fc;
       -moz-box-shadow: 0px 0px 4px #4195fc;
            box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */
  }

  .input_value_denied{
     border: 1px solid red !important; /* some kind of blue border */
     color:red !important;

    /* other CSS styles */

    /* round the corners */
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px #4195fc;
       -moz-box-shadow: 0px 0px 4px #4195fc;
            box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */
  }

  .input_value_approve{
     border: 1px solid green !important; /* some kind of blue border */
     color:green !important;

    /* other CSS styles */

    /* round the corners */
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px #4195fc;
       -moz-box-shadow: 0px 0px 4px #4195fc;
            box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */
  }

  .select_checkbox{
     border: 1px solid orange !important; /* some kind of blue border */

    /* other CSS styles */

    /* round the corners */
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px #4195fc;
       -moz-box-shadow: 0px 0px 4px #4195fc;
            box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */
  }
</style>

<script>
  $(function(){
    $('input[type="checkbox"].input_value_pending ').parent().find('span.checkbox').addClass('select_checkbox');
    $('select.input_value_pending ').parent().find('div.dropdown').addClass('input_value_pending');
    $('select.input_value_approve ').parent().find('div.dropdown').addClass('input_value_approve');
    $('select.input_value_denied ').parent().find('div.dropdown').addClass('input_value_denied');

    //LOOP FORMS
    $('.profile_form').each(function(){
      var form_id = $(this).attr('id');
      var checkbox_count = $(this).find("input[type='checkbox']:checked").length;
      var obj_form = $(this);
      
      //update badges
      $(".badge_"+form_id).text(checkbox_count);

      //fill onchange events to update number of checked items
      $(obj_form).find('input[type="checkbox"]').each(function(){
        $(this).on('change',function(){
          checkbox_count = $(obj_form).find("input[type='checkbox']:checked").length;  
          $(".badge_"+form_id).text(checkbox_count);
        })
      })

    });

  })
</script>